.react-tagsinput {
  &.react-tagsinput-invalid {
    .react-tagsinput-input {
      color: $cool-red;
      border-bottom-color: $cool-red;
    }
  }

  &.react-tagsinput-validating {
    .react-tagsinput-input {
      color: $cool-green;
      border-bottom-color: $cool-green;
    }
  }
}

.react-tagsinput-tag {
  background-color: $cool-gray;
  color: $white;
  font-weight: 400;
  margin-bottom: 4px;
  margin-right: 4px;
  padding: 4px 8px;
  padding-right: 6px;
  display: inline-block;
  font-size: 13px;
  border-radius: 2px;
}

/* a.k-tagsinput-remove */
.react-tagsinput-remove {
  @extend .k-icon, .k-icon-close;

  cursor: pointer;
  color: $white !important;
  opacity: 0.6;
  margin-left: 6px;

  &:hover {
    opacity: 0.9;
  }
}

.react-tagsinput-input {
  background: transparent;
  border: 0 none;
  color: $cool-darkgray;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 2px;
  margin-top: 1px;
  outline: none;
  padding: 5px;
  min-width: 90px;
}

.react-tags-save-button {
  float: left;
}
